<template>
  <div class="component">
    <ParamsView
      ref="paramsView" :params="params"
      :isRadio="isRadio" :isChoose="isChoose"
      @onChoose="handleChoose"
    />
    <Dialoger ref="diaParamsTpl"
      title="参数选择"
      width="1200px"
      height="500px"
      v-if="isChoose"
      @sure="setParam"
    >
      <template v-slot:body>
        <ParamsTpl ref="paramsTplView" />
      </template>
    </Dialoger>
  </div>
</template>

<script>
/* 接口参数 */
import { Dialoger } from '@daelui/vdog/dist/components'
import ParamsView from './params-shadow'
import ParamsTpl from './params-tpl'

export default {
  components: {
    Dialoger,
    ParamsView,
    ParamsTpl
  },

  props: {
    // 参数数据
    params: {
      default: {
        isCollapse: false,
        children: []
      }
    },
    // 是否允许单选
    isRadio: {
      default: false
    },
    // 是否可选择参数
    isChoose: {
      default: true
    }
  },

  data () {
    return {
      // 当前操作的参数视图
      activeParamView: null
    }
  },

  methods: {
    /**
    * @function 选择参数处理
    * @param {Object} activeParamView // 参数视图
    */
    handleChoose (activeParamView) {
      this.activeParamView = activeParamView
      this.$refs.diaParamsTpl.show()
      this.$refs.paramsTplView.load()
    },

    /**
    * @function 设置参数
    * @param {Object} item // 参数对象
    */
    setParam () {
      let param = this.$refs.paramsTplView.getState()
      this.$refs.diaParamsTpl.hide()
      if (this.activeParamView) {
        this.activeParamView.setParam(param)
      }
    }
  }
}
</script>

<style lang="less">

</style>
